<template>
    <div>
        <KnHeader></KnHeader>
        <div class="left-container">
            <el-row class="tac">
                <el-col :span="4">
                    <el-tree :data="categories" :props="defaultProps" @node-click="handleNodeClick"
                        default-expand-all></el-tree>
                </el-col>
                <el-col :span="20" class="table-container">
                    <el-row>
                        <el-button type="primary" class="add-btn" @click="addCategory">新增</el-button>
                    </el-row>
                    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                        default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                        <el-table-column prop="label" label="名称" sortable width="180">
                        </el-table-column>
                        <el-table-column prop="sort" label="顺序" align="center">
                        </el-table-column>
                        <el-table-column align="center">
                            <template slot="header" slot-scope="scope">
                                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                            </template>
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle
                                    @click="handleEdit(scope.$index, scope.row)">

                                </el-button>

                                <el-button type="danger" icon="el-icon-delete" circle
                                    @click="handleDelete(scope.$index, scope.row)">
                                </el-button>
                                <template>

                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>

        </div>
        <el-dialog title="分类表单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" v-model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="父分类">
                    <el-select v-model="form.parent" placeholder="请选择父分类">
                        <el-option label="无" value="0"></el-option>
                        <el-option v-for="category in topCategory" :label="category.label" :value="category.id"
                            :disabled="category.id === form.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="顺序">
                    <el-input v-model="form.sort" type="number"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import KnHeader from '@/components/KnHeader.vue'
import {
    getCategories, saveCategory, updateCategory, getCategroyVoById,
    deleteCategoryById
} from "@/apis/categoryApi";
import { getEbooks } from "@/apis/ebooks";
export default {
    //import引入组件才能使用
    components: {
        KnHeader,
    },
    props: {},
    data() {
        return {
            currentDate: new Date(),
            ebooks: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            categories: [],
            expandedKeys: [],
            tableData: [],
            tableData1: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                id: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                hasChildren: true
            }, {
                id: 4,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            search: '',
            dialogVisible: false,
            topCategory: [],
            form: {},
            allowSelect: false
        };
    },
    // 计算属性
    computed: {},
    // 方法集合
    methods: {
        message(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        },
        cancel() {
            this.dialogVisible = false
            this.form = {}

        },
        async save() {
            if (this.form.id) {
                let res = await updateCategory(this.form)
                console.log("更新", res);
                if (res.data.status === 200) {
                    this.message('更新成功', 'success')
                    this.dialogVisible = false
                    this.form = {}
                    this.getCategory()
                } else {
                    this.message(res.data.msg, 'error')
                }
            } else {
                let res = await saveCategory(this.form)
                console.log(res);
                if (res.data.status === 200) {
                    this.message('新增成功', 'success')
                    this.dialogVisible = false
                    this.form = {}
                    this.getCategory()
                } else {
                    this.message(res.data.msg, 'error')
                }
            }




        },
        // 新增分类
        addCategory() {
            this.dialogVisible = true
            this.topCategory = this.categories
            this.form = {}
        },
        load(tree, treeNode, resolve) {
            setTimeout(() => {
                resolve([
                    {
                        id: 31,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        id: 32,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }
                ])
            }, 1000)
        },
        async getCategory() {
            let records = await getCategories()
            console.log(records)
            this.categories = records.data.data
            this.tableData = this.categories
            console.log(this.tableData);

        },
        async handleNodeClick(data, node) {
            console.log('node===>', node.level)
            if (node.level !== 1) {
                let ebooks = await getEbooks(data.id)
                this.ebooks = ebooks.data.data
            }
        },
        handleEdit(index, row) {
            this.getCategoryById(row.id)

        },

        /**
         *  根据id查询分类
         * 
         */
        async getCategoryById(id) {
            let res = await getCategroyVoById(id)
            if (res.data.status === 200) {
                this.dialogVisible = true
                this.form = res.data.data
                this.topCategory = this.categories
            }
        },
        handleDelete(index, row) {
            console.log(index, row);
            this.deleteCategoryById(row.id)
        },
        /**
        * 根据id删除分类
        */
        async deleteCategoryById(id) {
            console.log("id", id);
            let res = await deleteCategoryById(id)
            console.log(res);
            if (res.data.status === 200) {
                this.message('删除成功', 'success')
                this.getCategory()
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    },
    created() {
        this.getCategory()

    },
}
</script>

<style scoped>
.table-container {
    padding: 15px;
}

.add-btn {
    margin-bottom: 10px;
}

.category-view {
    width: 80%;
    ;
}

.left-container {
    border: 1px solid #eee;
}

.tree-view {
    width: 200px;
    /* 设置卡片的宽度 */
}

.card-view {
    padding: 15px;
    margin: 0;
    width: 200px;
}

.image {
    width: 100%;
    display: block;
}

.description {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.stats {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}

.likes,
.reads {
    margin-right: 10px;
}

.time {
    font-size: 13px;
    color: #999;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}
</style>